<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script>

    const queuedObservers = new Set();
    
    const observe = fn => queuedObservers.add(fn);
    const observable = obj => new Proxy(obj, {set});

    function set(target, key, value, receiver) {
      const result = Reflect.set(target, key, value, receiver);
      queuedObservers.forEach(observe => observe());
      return result;
    }


    const person = observable({
      name: 'chen',
      age: 22
    })

    function print() {
      console.log(`${person.name}, ${person.age}`);
    }

    observe(print);
    person.name = 'haaa'; // 对象发生改变，触发函数print
  </script>
</head>
<body>
  
</body>
</html>